<template>
  <div>
    <Drawer
      ref="modal"
      :title="`${editType === 'create' ? $t('devicesCreate.devCreateAdd') : $t('devicesCreate.devCreateEdit')}`"
      :width="600"
      :value="show"
      :beforeClose="$_modal_decideIfClose"
    >
      <Form
        ref="form"
        :labelWidth="150"
        :model="formData"
        :rules="formRule"
      >
        <FormItem prop="sn" :label="$t('devicesCreate.devCreateNumber')">
          <!-- <Input v-model="formData.sn" :placeholder="$t('devicesCreate.devCreateNumberHint')" /> -->
          <div>{{formData.sn}}</div>
        </FormItem>
        <FormItem prop="deviceType" :label="$t('devicesCreate.devCreateType')">
          <Select
            style="width:200px"
            v-model="formData.deviceType"
            :placeholder="$t('devicesCreate.devCreateTypeHint')"
          >
            <Option
              v-for="(item, idx) in deviceType" :key="idx"
              :value="item.value"
              :label="item.name"
            >
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="name" :label="$t('devicesCreate.devCreateEquipmentName')">
          <Input v-model.trim="formData.name" :placeholder="$t('devicesCreate.devCreateEquipmentHint')" />
        </FormItem>
        <FormItem :label="$t('devicesCreate.devCreateSetName')">
          <i-switch v-model="ifAdvanced" />
        </FormItem>
        

        <FormItem v-show="ifAdvanced" prop="isIr" :label="$t('devicesCreate.devCreateIsOpenLive')">
          <i-switch
            v-model="formData.isIr"
            :true-value="1"
            :false-value="0"
            size="large"
          >
            <span slot="open">{{ $t("devicesCreate.devCreateIsOpenY") }}</span>
            <span slot="close">{{ $t("devicesCreate.devCreateIsOpenN") }}</span>
          </i-switch>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="faceFeaturePairNumber" :label="$t('devicesCreate.devCreateFace')">
          <InputNumber
            v-model="formData.faceFeaturePairNumber"
            :min="0" :max="1"
            :step="0.01"
            :style="{ width: '100px' }"
          />
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="wg" :label="$t('devicesCreate.openDoorWay')">
          <Select
            style="width:200px"
            v-model="formData.wg"
            :placeholder="$t('devicesCreate.selectDoorMode')"
          >
            <Option
              v-for="(item, idx) in wgType" :key="idx"
              :value="item.value"
              :label="item.name"
            >
            </Option>
          </Select>
        </FormItem>
        
        <FormItem v-show="ifAdvanced" prop="identifyIdCardValue" :label="$t('devicesCreate.devIdentifyIdCardValue')">
          <Slider v-model="formData.identifyIdCardValue"></Slider>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="doorDelayTime" :label="$t('devicesCreate.doorDelayTime')">
          <Slider v-model="formData.doorDelayTime" :min="0" :max="10000" :step="1000"></Slider>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="deviceIntoOrOut" :label="$t('devicesCreate.outType')">
          <i-switch
            v-model="formData.deviceIntoOrOut"
            :true-value="1"
            :false-value="0"
            size="large"
          >
            <span slot="open">{{ $t("devicesCreate.out") }}</span>
            <span slot="close">{{ $t("devicesCreate.in") }}</span>
          </i-switch>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="isLoose" :label="$t('devicesCreate.isWidth')">
          <i-switch
            v-model="formData.isLoose"
            :true-value="1"
            :false-value="0"
            size="large"
          >
            <span slot="open">{{ $t("devicesIndex.devOfflineAccessYes") }}</span>
            <span slot="close">{{ $t("devicesIndex.devOfflineAccessNo") }}</span>
          </i-switch>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="volume" :label="$t('devicesCreate.devCreateVolume')">
          <Slider v-model="formData.volume"></Slider>
        </FormItem> 
        <FormItem v-show="ifAdvanced" prop="ntpServerUrl" :label="$t('devicesCreate.ntpUrl')">
           <Input v-model="formData.ntpServerUrl" :placeholder="$t('companyManagement.pleaseEnter')" />
        </FormItem> 
        <FormItem v-show="ifAdvanced" prop="openDoorType" :label="$t('devicesCreate.devCreateOpenDoorType')">
           <RadioGroup v-model="formData.openDoorType">
              <Radio label="1">
                  <span>{{ $t("devicesCreate.devCreateICopen") }}</span>
              </Radio>
              <Radio label="2">
                  <span>{{ $t("devicesCreate.devCreateNormalOpen") }}</span>
              </Radio>
              <Radio label="3">
                  <span>{{ $t("devicesCreate.devCreateNormalOpenIc") }} </span>
              </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="restartTime" :label="$t('devicesCreate.restartTime')">
          <TimePicker type="time" :placeholder="$t('devicesCreate.selectTime')" style="width: 168px" :value="formData.restartTime" @on-change="changeTime"></TimePicker>
        </FormItem>
        <FormItem v-show="ifAdvanced" prop="bluetoothMac" :label="$t('devicesCreate.bluetoothMac')">
           <Input v-model="formData.bluetoothMac" maxlength="200"  :placeholder="$t('companyManagement.pleaseEnter')" />
        </FormItem> 
        <FormItem class="glo-btn-group">
          <Button
            type="primary"
            :loading="loading"
            @click="handleSubmit"
          >{{ $t("devicesCreate.devCreateSubmit") }}</Button>
          <Button
            @click="$_modal_close"
          >{{ $t("devicesCreate.devCreateCancel") }}</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import _ from 'lodash'
import {
  mapState,
} from 'vuex'

import modalMixin from '@/utils/mixins/modalMixin.js'
import {
  create,
  update,
} from '@/api/device.js'

const DEFAULT_FORM = {
  sn: '',
  deviceType: 'D2',
  wg: '',//开门方式
  name: '无',
  isIr: '1',
  deviceIntoOrOut:0,//设备进出的类型0：进，1：出
  isLoose:1,//宽动态模式 1是 0否
  ntpServerUrl:'',//ntp服务器url
  openDoorType: '',//开门条件
  protocolVersion:'',
  deviceId:'',
  faceFeaturePairNumber: 0.53,
  doorDelayTime:3000,
  volume: 50,
  identifyIdCardValue: 50,
  restartTime:'',
  bluetoothMac:'',//蓝牙mac地址
}

export default {
  mixins: [
    modalMixin,
  ],

  props: {
    editType: {
      type: String,
      default: 'create',
    },
    editItem: Object,
  },
  data () {
    return {
      deviceType: [
        { name: 'D2', value: 'D2' },
      ],
      wgType: [
        { name: this.$t('devicesCreate.relay'), value: '1' },
        { name: this.$t('devicesCreate.Wiggins26'), value:'2'},
        { name: this.$t('devicesCreate.Wiggins34'), value: '3' },
        { name: this.$t('devicesCreate.mix1'), value: '4' },
        { name: this.$t('devicesCreate.mix2'), value: '5' },
        { name: this.$t('devicesCreate.mix3'), value: '6' },
        { name: this.$t('devicesCreate.mix4'), value: '7' },
      ],
     
      ifAdvanced: true,
      formData: _.cloneDeep(DEFAULT_FORM),
      formRule: {
        // sn: { required: true, message: this.$t('devicesCreate.devCreatemustN') },
        name: { required: true, message: this.$t('devicesCreate.devCreatemustR') },
        
      },
    }
  },
  computed: {
    ...mapState([
      'departId',
    ]),
  },

  mounted () {
    this.show = true
    if (this.editType === 'update') {
      const formData = {}
      if(this.editItem.openDoorType=='null'){
        this.editItem.openDoorType='1'
      }
      if(this.editItem.wg=='null'){
        this.editItem.wg='1'
      }
      const keys = Object.keys(DEFAULT_FORM)
      keys.forEach(key => {
        formData[key] = _.isUndefined(this.editItem[key])
          ? DEFAULT_FORM[key]
          : this.editItem[key]
      })
      // formData.deviceId = this.editItem.deviceId
      // console.log(this.editItem)
      this.formData = _.cloneDeep(formData)
      console.log('formData.openDoorType',this.formData.openDoorType)
      this.formData.openDoorType=this.formData.openDoorType+''
    }
  },

  methods: {
    changeTime(e){
      this.formData.restartTime=e;
    },
    
    async handleSubmit () {
      const ifVlid = await this.$refs.form.validate()
      if (ifVlid && this.editType === 'create') {
        this.handleCreate()
      }
      if (ifVlid && this.editType === 'update') {
        this.handleUpdate()
      }
    },

    async handleCreate () {

      const formData = _.cloneDeep(this.formData)
      formData.departId = this.departId
      const { success } = await create(formData)
      if (success) {
        this.$Message.success(this.$t('devicesCreate.devCreateS'))
        this.ifUpdateUpper = true
        this.$_modal_close()
      } else {
        this.$Message.error(this.$t('devicesCreate.devCreateN'))
      }
    },
    async handleUpdate () {
      
      if (this.formData.isIr == null) {
        this.formData.isIr = 1
      }
      if (this.formData.faceFeaturePairNumber == null||this.formData.faceFeaturePairNumber>1) {
        this.formData.faceFeaturePairNumber = 0.53
      }
      if (this.formData.volume == null||!this.formData.volume) {
        this.formData.volume = 50
      }
      if (this.formData.openDoorType == null||!this.formData.openDoorType) {
        this.formData.openDoorType = 1
      }else{
        this.formData.openDoorType=Number(this.formData.openDoorType)
      }
      if (this.formData.wg == null||!this.formData.wg) {
        this.formData.wg = 1
      }else{
        this.formData.wg=Number(this.formData.wg)
      }
      
      const formData = _.cloneDeep(this.formData)
      // formData.departId = this.departId
      const { success } = await update(formData)
      if (success) {
        this.$Message.success(this.$t('devicesCreate.devCreateUpdateS'))
        this.ifUpdateUpper = true
        this.$_modal_close()
      } else {
        this.$Message.error(this.$t('devicesCreate.devCreateUpdateN'))
      }
    },
  },
}
</script>
